<template>
  <div class="landing-page">
    <!-- 顶部导航栏 -->
    <nav class="fixed top-0 left-0 right-0 z-50 glass shadow-lg">
      <div class="container mx-auto px-4 lg:px-8">
        <div class="flex items-center justify-between h-20">
          <!-- Logo -->
          <div class="flex items-center space-x-3">
            <div class="w-12 h-12 gradient-bg-hero rounded-xl flex items-center justify-center shadow-lg">
              <i class="fas fa-heart text-white text-2xl"></i>
            </div>
            <div>
              <h1 class="text-2xl font-bold bg-gradient-to-r from-pink-500 to-rose-400 bg-clip-text text-transparent">孤独症家庭干预平台</h1>
              <p class="text-xs text-gray-500 hidden sm:block">专业家庭干预支持</p>
            </div>
          </div>
          
          <!-- 桌面导航 -->
          <div class="hidden md:flex items-center space-x-8">
            <a href="#home" class="nav-link active text-gray-700 hover:text-pink-600 font-medium">首页</a>
            <a href="#about" class="nav-link text-gray-700 hover:text-pink-600 font-medium">关于孤独症</a>
            <a href="#features" class="nav-link text-gray-700 hover:text-pink-600 font-medium">核心功能</a>
            <a href="#testimonials" class="nav-link text-gray-700 hover:text-pink-600 font-medium">用户评价</a>
            <a href="#faq" class="nav-link text-gray-700 hover:text-pink-600 font-medium">常见问题</a>
          </div>
          
          <!-- 操作按钮 -->
          <div class="hidden md:flex items-center space-x-4">
            <button @click="goToLogin" class="btn px-6 py-2.5 text-pink-600 hover:text-pink-700 font-medium rounded-full border-2 border-pink-600 hover:bg-pink-50">
              登录
            </button>
            <button @click="goToRegister" class="btn px-6 py-2.5 bg-gradient-to-r from-pink-500 to-rose-400 text-white font-medium rounded-full shadow-lg hover:shadow-xl">
              注册
            </button>
          </div>
          
          <!-- 移动端菜单按钮 -->
          <button @click="toggleMobileMenu" class="md:hidden text-gray-700 text-2xl">
            <i class="fas fa-bars"></i>
          </button>
        </div>
        
        <!-- 移动端菜单 -->
        <div v-show="isMobileMenuOpen" class="mobile-menu md:hidden border-t border-gray-100" :class="{ 'active': isMobileMenuOpen }">
          <div class="py-4 space-y-4">
            <a href="#home" class="block text-gray-700 hover:text-pink-600 font-medium" @click="closeMobileMenu">首页</a>
            <a href="#about" class="block text-gray-700 hover:text-pink-600 font-medium" @click="closeMobileMenu">关于孤独症</a>
            <a href="#features" class="block text-gray-700 hover:text-pink-600 font-medium" @click="closeMobileMenu">核心功能</a>
            <a href="#testimonials" class="block text-gray-700 hover:text-pink-600 font-medium" @click="closeMobileMenu">用户评价</a>
            <a href="#faq" class="block text-gray-700 hover:text-pink-600 font-medium" @click="closeMobileMenu">常见问题</a>
            <div class="flex flex-col space-y-3 pt-4">
              <button @click="goToLogin" class="btn px-6 py-2.5 text-pink-600 font-medium rounded-full border-2 border-pink-600 text-center">
                登录
              </button>
              <button @click="goToRegister" class="btn px-6 py-2.5 bg-gradient-to-r from-pink-500 to-rose-400 text-white font-medium rounded-full text-center">
                注册
              </button>
            </div>
          </div>
        </div>
      </div>
    </nav>
    
    <!-- Hero Section -->
    <section id="home" class="relative min-h-screen flex items-center justify-center overflow-hidden pt-20">
      <div class="absolute inset-0 gradient-bg-hero opacity-90"></div>
      <div class="floating-shape w-64 h-64 bg-pink-300 top-20 left-10"></div>
      <div class="floating-shape w-96 h-96 bg-pink-400 bottom-20 right-10" style="animation-delay: 1s;"></div>
      <div class="floating-shape w-48 h-48 bg-blue-400 top-1/2 right-1/4" style="animation-delay: 2s;"></div>
      
      <div class="relative z-10 container mx-auto px-4 lg:px-8 py-20">
        <div class="max-w-4xl mx-auto text-center">
          <div class="animate-fade-in-up">
            <h1 class="text-5xl md:text-6xl lg:text-7xl font-bold text-white mb-6 leading-tight">
              科学家庭干预<br>
              陪"星宝"慢慢长大
            </h1>
            <p class="text-xl md:text-2xl text-white/90 mb-12 max-w-3xl mx-auto leading-relaxed">
              专为孤独症儿童设计的家庭干预平台<br>
              让专业干预融入日常，让每一步成长都清晰可见
            </p>
            <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
              <button @click="goToRegister" class="btn px-10 py-4 bg-white text-pink-600 font-bold text-lg rounded-full shadow-2xl hover:shadow-3xl transform hover:scale-105">
                <i class="fas fa-rocket mr-2"></i>
                立即注册
              </button>
              <button @click="scrollToFeatures" class="btn px-10 py-4 bg-white/20 text-white font-bold text-lg rounded-full border-2 border-white backdrop-blur-sm hover:bg-white/30">
                <i class="fas fa-arrow-down mr-2"></i>
                了解更多
              </button>
            </div>
          </div>
          
          <!-- 统计数据 -->
          <div class="grid grid-cols-3 gap-8 mt-20 animate-scale-in">
            <div class="text-center">
              <div class="text-4xl md:text-5xl font-bold text-white mb-2">1000+</div>
              <p class="text-white/80">专业任务</p>
            </div>
            <div class="text-center">
              <div class="text-4xl md:text-5xl font-bold text-white mb-2">500+</div>
              <p class="text-white/80">完成任务</p>
            </div>
            <div class="text-center">
              <div class="text-4xl md:text-5xl font-bold text-white mb-2">95%</div>
              <p class="text-white/80">满意度</p>
            </div>
          </div>
        </div>
      </div>
      
      <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce">
        <i class="fas fa-chevron-down text-white text-3xl opacity-70"></i>
      </div>
    </section>
    
    <!-- 关于孤独症 -->
    <section id="about" class="py-20 lg:py-32 bg-white">
      <div class="container mx-auto px-4 lg:px-8">
        <div class="text-center mb-16">
          <h2 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4 title-decoration">认识孤独症</h2>
          <p class="text-xl text-gray-600 max-w-3xl mx-auto">了解孤独症，是开启科学干预的第一步</p>
        </div>
        
        <div class="grid md:grid-cols-2 gap-12 lg:gap-16 items-center max-w-6xl mx-auto">
          <div class="animate-slide-in-left">
            <div class="relative hover-zoom rounded-3xl overflow-hidden shadow-2xl">
              <img src="/src/imgs/97b9727801b0addc7ebc1b9aff30cfff.png" alt="孤独症儿童" class="w-full h-auto">
              <div class="absolute inset-0 bg-gradient-to-t from-pink-900/50 to-transparent"></div>
            </div>
          </div>
          
          <div class="animate-slide-in-right space-y-8">
            <div class="bg-gradient-to-br from-pink-50 to-rose-50 rounded-2xl p-8 shadow-lg hover:shadow-xl transition-shadow">
              <div class="flex items-start space-x-4">
                <div class="w-12 h-12 gradient-bg-1 rounded-xl flex items-center justify-center flex-shrink-0">
                  <i class="fas fa-question-circle text-white text-xl"></i>
                </div>
                <div>
                  <h3 class="text-2xl font-bold text-gray-800 mb-3">什么是孤独症？</h3>
                  <p class="text-gray-600 leading-relaxed">
                    孤独症谱系障碍（ASD）是一种神经发育障碍，核心表现为社交沟通困难、兴趣狭窄和重复刻板行为。每个孩子的症状差异较大，需要"一人一策"的个性化干预方案。
                  </p>
                </div>
              </div>
            </div>
            
            <div class="bg-gradient-to-br from-blue-50 to-pink-50 rounded-2xl p-8 shadow-lg hover:shadow-xl transition-shadow">
              <div class="flex items-start space-x-4">
                <div class="w-12 h-12 gradient-bg-3 rounded-xl flex items-center justify-center flex-shrink-0">
                  <i class="fas fa-home text-white text-xl"></i>
                </div>
                <div>
                  <h3 class="text-2xl font-bold text-gray-800 mb-3">家庭干预的重要性</h3>
                  <p class="text-gray-600 leading-relaxed">
                    家庭是孩子最熟悉的环境，在这里进行干预训练能让孩子更放松、更容易接受。家长的参与能及时捕捉每一次进步，让干预更加持续有效。
                  </p>
                </div>
              </div>
            </div>
            
            <div class="bg-gradient-to-br from-pink-50 to-orange-50 rounded-2xl p-8 shadow-lg hover:shadow-xl transition-shadow">
              <div class="flex items-start space-x-4">
                <div class="w-12 h-12 gradient-bg-2 rounded-xl flex items-center justify-center flex-shrink-0">
                  <i class="fas fa-lightbulb text-white text-xl"></i>
                </div>
                <div>
                  <h3 class="text-2xl font-bold text-gray-800 mb-3">我们如何帮助您</h3>
                  <p class="text-gray-600 leading-relaxed">
                    通过"任务拆解 → 定时提醒 → 进度追踪 → 效果可视化"的全流程支持，将专业干预方法转化为可操作的日常任务，让家庭干预变得简单高效。
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    
    <!-- 核心功能 -->
    <section id="features" class="py-20 lg:py-32 bg-gradient-to-br from-pink-50 via-rose-50 to-orange-50">
      <div class="container mx-auto px-4 lg:px-8">
        <div class="text-center mb-16">
          <h2 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4 title-decoration">三大核心功能</h2>
          <p class="text-xl text-gray-600 max-w-3xl mx-auto">专为孤独症儿童家庭干预设计的完整解决方案</p>
        </div>
        
        <div class="grid md:grid-cols-2 gap-8 max-w-7xl mx-auto">
          <!-- 功能卡片 -->
          <div v-for="(feature, index) in features" :key="index" class="feature-card bg-white rounded-3xl p-8 lg:p-10 shadow-xl hover:shadow-2xl">
            <div class="flex items-center mb-6">
              <div :class="feature.iconBgClass" class="w-16 h-16 rounded-2xl flex items-center justify-center mr-5 shadow-lg">
                <i :class="feature.icon" class="text-white text-3xl"></i>
              </div>
              <h3 class="text-2xl lg:text-3xl font-bold text-gray-800">{{ feature.title }}</h3>
            </div>
            
            <ul class="space-y-4 mb-6">
              <li v-for="(item, i) in feature.items" :key="i" class="flex items-start">
                <i :class="feature.checkColor" class="fas fa-check-circle text-xl mr-3 mt-1 flex-shrink-0"></i>
                <span class="text-gray-700 text-lg">{{ item }}</span>
              </li>
            </ul>
            
            <div :class="feature.tipBgClass" class="rounded-xl p-4">
              <p class="text-gray-700 flex items-start">
                <i class="fas fa-star text-yellow-500 mr-2 mt-1 flex-shrink-0"></i>
                <span>{{ feature.tip }}</span>
              </p>
            </div>
            
            <!-- 图表区域 -->
            <div v-if="feature.showChart" class="bg-gradient-to-r from-pink-50 to-rose-50 rounded-xl p-4 mt-6">
              <canvas :ref="el => chartCanvas = el" class="w-full" style="height: 200px;"></canvas>
            </div>
          </div>
        </div>
      </div>
    </section>
    
    <!-- 用户评价 -->
    <section id="testimonials" class="py-20 lg:py-32 bg-white">
      <div class="container mx-auto px-4 lg:px-8">
        <div class="text-center mb-16">
          <h2 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4 title-decoration">真实家长评价</h2>
          <p class="text-xl text-gray-600 max-w-3xl mx-auto">来自使用孤独症家庭干预平台的家长们的心声</p>
        </div>
        
        <div class="grid md:grid-cols-3 gap-8 max-w-7xl mx-auto">
          <div v-for="(testimonial, index) in testimonials" :key="index" 
               :class="testimonial.bgClass"
               class="rounded-3xl p-8 shadow-xl hover:shadow-2xl transition-all transform hover:-translate-y-2">
            <div class="flex items-center mb-6">
              <div :class="testimonial.avatarBgClass" class="w-16 h-16 rounded-full flex items-center justify-center text-white text-2xl font-bold mr-4">
                {{ testimonial.avatar }}
              </div>
              <div>
                <h4 class="text-xl font-bold text-gray-800">{{ testimonial.name }}</h4>
                <p class="text-gray-500">{{ testimonial.duration }}</p>
              </div>
            </div>
            
            <div class="flex mb-4">
              <i v-for="n in 5" :key="n" class="fas fa-star text-yellow-400 text-xl"></i>
            </div>
            
            <p class="text-gray-700 leading-relaxed italic">{{ testimonial.content }}</p>
          </div>
        </div>
      </div>
    </section>
    
    <!-- 常见问题 -->
    <section id="faq" class="py-20 lg:py-32 bg-gradient-to-br from-gray-50 to-pink-50">
      <div class="container mx-auto px-4 lg:px-8">
        <div class="text-center mb-16">
          <h2 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4 title-decoration">常见问题</h2>
          <p class="text-xl text-gray-600 max-w-3xl mx-auto">解答您最关心的问题</p>
        </div>
        
        <div class="max-w-4xl mx-auto space-y-4">
          <div v-for="(faq, index) in faqs" :key="index" class="bg-white rounded-2xl shadow-lg overflow-hidden">
            <button @click="toggleFAQ(index)" class="w-full px-8 py-6 text-left flex items-center justify-between hover:bg-pink-50 transition-colors">
              <span class="text-xl font-bold text-gray-800">{{ faq.question }}</span>
              <i class="fas fa-chevron-down text-pink-600 text-xl faq-arrow transition-transform" 
                 :class="{ 'rotate-180': faq.isOpen }"></i>
            </button>
            <div v-show="faq.isOpen" class="px-8 py-6 bg-pink-50 border-t border-pink-100">
              <p class="text-gray-700 leading-relaxed text-lg">{{ faq.answer }}</p>
            </div>
          </div>
        </div>
      </div>
    </section>
    
    <!-- CTA Section -->
    <section class="py-20 lg:py-32 gradient-bg-hero relative overflow-hidden">
      <div class="floating-shape w-64 h-64 bg-white/20 top-10 left-10"></div>
      <div class="floating-shape w-96 h-96 bg-white/20 bottom-10 right-10" style="animation-delay: 1s;"></div>
      
      <div class="container mx-auto px-4 lg:px-8 relative z-10">
        <div class="max-w-4xl mx-auto text-center">
          <h2 class="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6">
            立即开始您的干预之旅
          </h2>
          <p class="text-xl md:text-2xl text-white/90 mb-12">
            让科学干预陪伴孩子成长
          </p>
          
          <div class="flex flex-col sm:flex-row items-center justify-center gap-6">
            <button @click="goToRegister" class="btn px-12 py-5 bg-white text-pink-600 font-bold text-xl rounded-full shadow-2xl hover:shadow-3xl transform hover:scale-105">
              <i class="fas fa-user-plus mr-2"></i>
              注册
            </button>
            <button @click="goToLogin" class="btn px-12 py-5 bg-transparent text-white font-bold text-xl rounded-full border-3 border-white hover:bg-white hover:text-pink-600">
              <i class="fas fa-sign-in-alt mr-2"></i>
              立即登录
            </button>
          </div>
          
          <p class="text-white/80 mt-8 text-sm">
            注册即表示同意 <a href="#" class="underline hover:text-white">《用户协议》</a> 和 <a href="#" class="underline hover:text-white">《隐私政策》</a>
          </p>
        </div>
      </div>
    </section>
    
    <!-- 页脚 -->
    <footer class="bg-gray-900 text-gray-300 py-12">
      <div class="container mx-auto px-4 lg:px-8">
        <div class="max-w-xl mx-auto text-center">
          <div class="flex items-center justify-center space-x-3 mb-4">
            <div class="w-10 h-10 gradient-bg-hero rounded-lg flex items-center justify-center">
              <i class="fas fa-heart text-white text-lg"></i>
            </div>
            <h3 class="text-xl font-bold text-white">孤独症家庭干预平台</h3>
          </div>
          <p class="text-gray-400 leading-relaxed">
            专注孤独症家庭干预的数字化平台，依托专业干预理论，为家长提供可落地的训练工具，陪伴孩子健康成长。
          </p>
        </div>
      </div>
    </footer>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import Chart from 'chart.js/auto'

const router = useRouter()

// 移动端菜单
const isMobileMenuOpen = ref(false)
const toggleMobileMenu = () => {
  isMobileMenuOpen.value = !isMobileMenuOpen.value
}
const closeMobileMenu = () => {
  isMobileMenuOpen.value = false
}

// 导航
const goToLogin = () => {
  router.push('/login')
}

const goToRegister = () => {
  router.push('/register')
}

const scrollToFeatures = () => {
  const element = document.getElementById('features')
  if (element) {
    element.scrollIntoView({ behavior: 'smooth', block: 'start' })
  }
}

// 图表
const chartCanvas = ref(null)

// 功能数据
const features = ref([
  {
    title: '1000+ 任务库',
    icon: 'fas fa-tasks',
    iconBgClass: 'gradient-bg-1',
    checkColor: 'text-pink-500',
    tipBgClass: 'bg-gradient-to-r from-pink-100 to-rose-100',
    items: [
      '覆盖社交沟通、生活自理、认知能力三大核心领域',
      '按难度、时长、干预目标多维度智能筛选',
      '支持自定义任务，打造个性化训练方案'
    ],
    tip: '结构化任务设计符合孤独症儿童"循序渐进"的学习特点，让每一步都有据可循',
    showChart: false
  },
  {
    title: '进度记录追踪',
    icon: 'fas fa-clipboard-check',
    iconBgClass: 'gradient-bg-3',
    checkColor: 'text-blue-500',
    tipBgClass: 'bg-gradient-to-r from-blue-100 to-pink-100',
    items: [
      '一键标记任务完成状态，支持详细备注',
      '自动存储历史记录，按周/月分类查看',
      '支持导出打印，便于与专业医师沟通'
    ],
    tip: '可视化记录让每一个小进步都清晰可见，增强家长干预信心',
    showChart: false
  },
  {
    title: '能力曲线可视化',
    icon: 'fas fa-chart-line',
    iconBgClass: 'gradient-bg-hero',
    checkColor: 'text-pink-500',
    tipBgClass: 'bg-gradient-to-r from-pink-100 to-rose-100',
    items: [
      '自动生成三大能力领域的成长曲线',
      '直观展示核心趋势，无复杂数据干扰',
      '点击查看详细任务完成情况'
    ],
    tip: '将碎片化进步转化为直观趋势，避免因"短期无变化"而放弃',
    showChart: true
  }
])

// 评价数据
const testimonials = ref([
  {
    name: '李女士',
    avatar: '李',
    duration: '使用 6 个月',
    content: '"平台的任务设计非常专业，儿子现在能主动和我们打招呼了。看到能力曲线一点点上升，特别有成就感！"',
    bgClass: 'bg-gradient-to-br from-pink-50 to-white',
    avatarBgClass: 'gradient-bg-1'
  },
  {
    name: '张女士',
    avatar: '张',
    duration: '使用 8 个月',
    content: '"最喜欢任务库，按难度分级很科学。女儿现在自理能力进步明显，能自己穿衣服了，感谢平台！"',
    bgClass: 'bg-gradient-to-br from-blue-50 to-white',
    avatarBgClass: 'gradient-bg-3'
  }
])

// FAQ 数据
const faqs = ref([
  {
    question: '平台适合什么年龄段的孩子？',
    answer: '平台适合 2-12 岁的孤独症儿童。任务库按年龄段和能力水平进行科学分级，家长可以根据孩子的实际情况选择最合适的任务。无论孩子处于哪个发展阶段，都能找到适合的训练内容。',
    isOpen: false
  },
  {
    question: '需要每天花多长时间使用平台？',
    answer: '建议每天进行 30-60 分钟的结构化训练，可以分散到不同时段进行。平台会根据您设置的时间自动提醒，确保训练的规律性。您可以根据孩子的状态和家庭实际情况灵活调整。',
    isOpen: false
  },
  {
    question: '能看到孩子的具体进步吗？',
    answer: '当然可以！平台会自动生成能力曲线图，直观展示孩子在社交、自理、认知三大领域的进步趋势。您还可以查看每周/每月的详细记录和对比分析，让每一点进步都有据可查。',
    isOpen: false
  }
])

const toggleFAQ = (index) => {
  // 关闭其他FAQ
  faqs.value.forEach((faq, i) => {
    if (i !== index) faq.isOpen = false
  })
  // 切换当前FAQ
  faqs.value[index].isOpen = !faqs.value[index].isOpen
}

// 初始化图表
onMounted(() => {
  nextTick(() => {
    if (chartCanvas.value) {
      new Chart(chartCanvas.value.getContext('2d'), {
        type: 'line',
        data: {
          labels: ['第1周', '第2周', '第3周', '第4周', '第5周', '第6周'],
          datasets: [
              {
                label: '社交能力',
                data: [30, 35, 42, 48, 55, 62],
                borderColor: '#ff9a9e',
                backgroundColor: 'rgba(255, 154, 158, 0.1)',
                tension: 0.4,
                fill: true,
                pointRadius: 4,
                pointHoverRadius: 6
              },
              {
                label: '自理能力',
                data: [40, 45, 52, 58, 65, 72],
                borderColor: '#fecfef',
                backgroundColor: 'rgba(254, 207, 239, 0.1)',
                tension: 0.4,
                fill: true,
                pointRadius: 4,
                pointHoverRadius: 6
              },
              {
                label: '认知能力',
                data: [25, 30, 38, 45, 52, 60],
                borderColor: '#fbc2eb',
                backgroundColor: 'rgba(251, 194, 235, 0.1)',
                tension: 0.4,
                fill: true,
                pointRadius: 4,
                pointHoverRadius: 6
              }
          ]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            legend: {
              position: 'bottom',
              labels: {
                usePointStyle: true,
                padding: 15,
                font: { size: 12 }
              }
            },
            tooltip: {
              mode: 'index',
              intersect: false,
              backgroundColor: 'rgba(0, 0, 0, 0.8)',
              padding: 12,
              cornerRadius: 8
            }
          },
          scales: {
            y: {
              beginAtZero: true,
              max: 100,
              grid: { color: 'rgba(0, 0, 0, 0.05)' },
              ticks: { stepSize: 20 }
            },
            x: {
              grid: { display: false }
            }
          }
        }
      })
    }
  })
  
  // 平滑滚动
  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', (e) => {
      const href = anchor.getAttribute('href')
      if (href !== '#' && href !== '') {
        e.preventDefault()
        const target = document.querySelector(href)
        if (target) {
          target.scrollIntoView({ behavior: 'smooth', block: 'start' })
          closeMobileMenu()
        }
      }
    })
  })
})
</script>

<style scoped>
/* 平滑滚动 */
html {
  scroll-behavior: smooth;
}

/* 渐变背景 */
.gradient-bg-1 {
  background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
}

.gradient-bg-2 {
  background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
}

.gradient-bg-3 {
  background: linear-gradient(135deg, #fbc2eb 0%, #a6c1ee 100%);
}

.gradient-bg-hero {
  background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #ffecd2 100%);
}

/* 玻璃态效果 */
.glass {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* 导航栏 */
.nav-link {
  position: relative;
  transition: all 0.3s ease;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #ff9a9e 0%, #fad0c4 100%);
  transition: transform 0.3s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
  transform: translateX(-50%) scaleX(1);
}

/* 按钮效果 */
.btn {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  border-radius: inherit;
  transition: transform 0.5s ease;
}

.btn:hover::before {
  transform: translate(-50%, -50%) scale(1.5);
}

/* 卡片悬停 */
.feature-card {
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.feature-card:hover {
  transform: translateY(-10px) scale(1.02);
}

/* 悬浮装饰元素 */
.floating-shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.3;
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}

/* 标题装饰 */
.title-decoration {
  position: relative;
  display: inline-block;
}

.title-decoration::before {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, #ff9a9e 0%, #fad0c4 100%);
  border-radius: 2px;
}

/* 移动端菜单 */
.mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.mobile-menu.active {
  max-height: 500px;
}

/* 图片悬停 */
.hover-zoom {
  overflow: hidden;
}

.hover-zoom img {
  transition: transform 0.5s ease;
}

.hover-zoom:hover img {
  transform: scale(1.1);
}

/* 动画 */
.animate-fade-in-up {
  animation: fadeInUp 0.8s ease-out;
}

.animate-scale-in {
  animation: scaleIn 0.5s ease-out;
}

.animate-slide-in-left {
  animation: slideInLeft 0.6s ease-out;
}

.animate-slide-in-right {
  animation: slideInRight 0.6s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
</style>

